<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 536px;
    margin-bottom: 18px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

</style>
<style>
  .upload-file {
    display: -webkit-box;
    display: -ms-flexbox;
    / display: flex;
    / -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    height: 40px;
    width: 310px;
  }

  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li {
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close {
    line-height: inherit;
    top: 0;
  }

  .el-form-item.is-error .upload-file .el-upload-list {
    border-color: #f56c6c;
  }

  .read-only-form .el-input__inner {
    border: none;
    padding: 0 15px;
  }

  .read-only-form .el-input__icon {
    display: none;
  }

  .read-only-form .el-upload-list {
    border: none;
  }

  .read-only-form .without .el-input__inner {
    border: 1px solid #dcdfe6;
  }

  .read-only-form .without .el-input__icon {
    display: block;
  }

  .read-only-form input[disabled] {
    color: #000000 !important;
    background: #fff !important;
    opacity: 1
  }

</style>
<template>
  <div class="tab_content">
    <div :class="{'read-only-form': readonly}">
      <el-form ref="form" :rules="rules" :model="form" :inline="true" label-width="233px" class="flex-form">
        <el-form-item label="企业全称：" prop="cmpFulName">
          <el-input :disabled="readonly" v-model="form.cmpFulName"></el-input>
        </el-form-item>
        <el-form-item label="企业类型：" prop="attribute">
          <el-select :disabled="readonly" v-model="form.attribute" style="width: 202px">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in orgProperties" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业性质：" prop="cmpNature">
          <el-select :disabled="readonly" v-model="form.cmpNature" style="width: 202px">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in orgType" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成立年份：" prop="foundedYear">
          <el-date-picker :disabled="readonly" type="year" v-model="form.foundedYear" format="yyyy" value-format="yyyy" style="width: 202px"></el-date-picker>
        </el-form-item>
        <el-form-item label="注册资金(万元)：" prop="registeredAssets">
          <el-input :disabled="readonly" v-model="form.registeredAssets"></el-input>
        </el-form-item>
        <el-form-item label="企业法人：" prop="corporation">
          <el-input :disabled="readonly" v-model="form.corporation"></el-input>
        </el-form-item>
        <el-form-item label="注册地址：" prop="countryCode" style="width: 100%;">
          <select-city :disabled="readonly" :country.sync="form.countryCode" :province.sync="form.provinceCode" :city.sync="form.cityCode"
            :width="readonly?'100px':'136px'" style="display: inline-block" ref="addressSelect" @select-change="selectChange"></select-city>
          <el-input :disabled="readonly" v-model="form.addressDetail" placeholder=" " style="width: 327px; display: inline-block" @change="addressDetailChange"></el-input>
        </el-form-item>
        <!--<el-form-item prop="addressDetail" label=" " style="min-width: 800px">-->
        <!---->
        <!--</el-form-item>-->
        <el-form-item label="邮编：" prop="postCode">
          <el-input :disabled="readonly" v-model="form.postCode"></el-input>
        </el-form-item>
        <el-form-item label="公司地址：" prop="address">
          <el-input :disabled="readonly" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="供货区域：" prop="supplyArea">
          <el-select :disabled="readonly" v-model="form.supplyArea" placeholder=" " style="width: 202px">
            <el-option v-for="(item, index) in purOrg" :key="index" :label="item.purOrgName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主供品类：" prop="offeringCode">
          <select-tree :disabled="readonly" v-model="form.offeringName" :code.sync="form.offeringCode" :multiple="false" :lazy="false"
            style="width: 202px"></select-tree>
        </el-form-item>
        <el-form-item label="厂房所有：" prop="factoryType">
          <el-radio-group v-if="!readonly" v-model="form.factoryType">
            <el-radio label="0">租赁</el-radio>
            <el-radio label="1">自有</el-radio>
            <el-radio label="2">租赁和自有均有</el-radio>
          </el-radio-group>
          <span v-else style="margin-left: 15px">{{form.factoryType == 0?'租赁': form.factoryType == 1? '自有': '租赁和自有均有'}}</span>
        </el-form-item>
        <el-form-item label="厂房面积：" prop="factoryArea">
          <el-input :disabled="readonly" v-model="form.factoryArea"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积：" prop="buildArea">
          <el-input :disabled="readonly" v-model="form.buildArea"></el-input>
        </el-form-item>
        <div class="line"></div>
        <el-form-item :label="changeName" prop="socialCreditCode">
          <el-input :disabled="readonly" v-model="form.socialCreditCode"></el-input>
        </el-form-item>
        <el-form-item label="营业执照上传：" prop="socialCreditCodeFileName" style="min-width: 800px">
          <el-upload v-if="!readonly" class="upload-file" action="" ref="socialCreditCodeFile" multiple :limit="1" :auto-upload="false"
            :file-list="socialCreditCodeFileList" :on-preview="previewFile" :on-exceed="onExceed">
            <el-button slot="trigger" type="primary">选取文件</el-button>
          </el-upload>
          <el-button  v-else type="text" @click="downloadFile(form.socialCreditCodeFileUrl, form.socialCreditCodeFileName)">{{form.socialCreditCodeFileName}}</el-button>
        </el-form-item>
        <el-form-item label="是否能出口：" prop="exitFlag">
          <el-radio-group v-if="!readonly" v-model="form.exitFlag">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
          <span v-else style="margin-left: 15px">{{form.exitFlag == 0?'否': '是'}}</span>
        </el-form-item>
        <el-form-item label="出口许可证：" prop="exportFileName" v-if="form.exitFlag != 0">
          <el-upload v-if="!readonly" class="upload-file" ref="exportFile" action="" multiple :limit="1" :auto-upload="false" :file-list="exportFileList"
            :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">选取文件</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.exportFileUrl, form.exportFileName)">{{form.exportFileName}}</el-button>
        </el-form-item>
        <el-form-item label="保密协议：" prop="secrecyFileName">
          <el-upload v-if="!readonly" class="upload-file" action="" multiple :limit="1" :auto-upload="false" ref="secrecyFile" :file-list="secrecyFileList"
            :on-preview="previewFile" :on-exceed="onExceed">
            <el-button type="primary">选取文件</el-button>
          </el-upload>
          <el-button v-else type="text" @click="downloadFile(form.secrecyFileUrl, form.secrecyFileName)">{{form.secrecyFileName}}</el-button>
        </el-form-item>
        <div class="line"></div>
        <el-form-item label="公司网站：" prop="companySite">
          <el-input :disabled="readonly" v-model="form.companySite"></el-input>
        </el-form-item>
        <el-form-item label="公司电话：" prop="tel">
          <el-input :disabled="readonly" v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="传真：" prop="faxNo">
          <el-input :disabled="readonly" v-model="form.faxNo"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkman">
          <el-input :disabled="readonly" v-model="form.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机：" prop="mobilePhone">
          <el-input :disabled="readonly" v-model="form.mobilePhone"></el-input>
        </el-form-item>
        <el-form-item label="联系人邮箱：" prop="email">
          <el-input :disabled="readonly" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="是否有亲属在养生堂集团：" prop="relativeState">
          <el-radio-group v-if="!readonly" v-model="form.relativeState" style="width: 202px">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
          <span v-else style="margin-left: 15px">{{form.exitFlag == 0?'否': '是'}}</span>
        </el-form-item>
        <el-form-item label="是否与养生堂集团是竞争关系：" prop="competeState">
          <el-radio-group v-if="!readonly" v-model="form.competeState" style="width: 202px">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
          <span v-else style="margin-left: 15px">{{form.exitFlag == 0?'否': '是'}}</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import SelectCity from '../../../common/select-ext/select-city';
  import SelectTree from '../../../common/select-ext/select-tree';
  export default {
    data() {
      return {
        form: {
          cmpFulName: '',
          attribute: '',
          cmpNature: '',
          foundedYear: '',
          registeredAssets: '',
          corporation: '',
          addressDetail: '',
          postCode: '',
          address: '',
          countryCode: '',
          provinceCode: '',
          cityCode: '',
          offeringCode: '',
          offeringName: '',
          factoryType: '',
          factoryArea: '',
          buildArea: '',
          socialCreditCode: '',
          socialCreditCodeFileName: '',
          socialCreditCodeFileUrl: '',
          companySite: '',
          tel: '',
          faxNo: '',
          linkman: '',
          mobilePhone: '',
          email: '',
          relativeState: '',
          competeState: '',
          supplyArea: '',
          exitFlag: '',
          disableCheck: false,
          exportFileName: '',
          exportFileUrl: '',
          secrecyFileName: '',
          secrecyFileUrl: ''
        },
        tempAddress: '',
        socialCreditCodeFileList: [],
        exportFileList: [],
        secrecyFileList: [],
        rules: {
          cmpFulName: [{
            required: true,
            message: '请输入企业全称',
            trigger: 'blur'
          }],
          attribute: [{
            required: true,
            message: '请选择企业类型',
            trigger: 'change'
          }],
          cmpNature: [{
            required: true,
            message: '请选择企业性质',
            trigger: 'change'
          }],
          foundedYear: [{
            required: true,
            message: '请输入成立年份',
            trigger: 'blur'
          }],
          registeredAssets: [{
            required: true,
            message: '请输入注册资金(万元)',
            trigger: 'blur'
          }],
          corporation: [{
            required: true,
            message: '请输入企业法人',
            trigger: 'blur'
          }],
          postCode: [{
            required: true,
            message: '请输入邮编',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入公司地址',
            trigger: 'blur'
          }],
          offeringCode: [{
            required: true,
            message: '请选择主供品类',
            trigger: 'change'
          }],
          factoryType: [{
            required: true,
            message: '请选择厂房所有',
            trigger: 'change'
          }],
          factoryArea: [{
            required: true,
            message: '请输入厂房面积',
            trigger: 'blur'
          }],
          buildArea: [{
            required: true,
            message: '请输入建筑面积',
            trigger: 'blur'
          }],
          companySite: [{
            required: true,
            message: '请输入公司网站',
            trigger: 'blur'
          },{
            type:'url',
            message: '请输入正确的网站',
            trigger: 'blur'
          }],
          tel: [{
            required: true,
            message: '请输入公司电话',
            trigger: 'blur'
          },{
            pattern: /^([0-9]|[-])+$/g,
            message: '请输入正确的电话',
            trigger: 'blur'
          }],
          // countryCode:[{required: true, message: '请输入注册地址', trigger: ''}],
          linkman: [{
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }],
          socialCreditCode: [{
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          },{
            pattern:  /^[0-9a-zA-Z]*$/g,
            message: '只能输入数字与字母',
            trigger: 'blur'
          }],
          mobilePhone: [{
            required: true,
            message: '请输入联系人手机',
            trigger: 'blur'
          },{
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '请输入联系人邮箱',
            trigger: 'blur'
          },{
            type: 'email',
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }],
          relativeState: [{
            required: true,
            message: '请选择是否有亲属在农夫山泉集团',
            trigger: 'change'
          }],
          competeState: [{
            required: true,
            message: '请选择是否与农夫山泉集团是竞争关系',
            trigger: 'change'
          }],
          supplyArea: [{
            required: true,
            message: '请选择供货区域',
            trigger: 'change'
          }],
          exitFlag: [{
            required: true,
            message: '请选择是否能出口',
            trigger: 'change'
          }],
          socialCreditCodeFileName: [{
            required: true,
            message: '请选择扫描件上传',
            trigger: 'change'
          }],
          secrecyFileName: [{
            required: true,
            message: '请选择保密协议上传',
            trigger: 'change'
          }]
        },
        orgProperties:[],
        orgType: [],
        purOrg: [],
      }
    },
    components: {
      SelectCity,
      SelectTree
    },
    created() {
      this.getDicData('ORG_PROPERTY').then((data) => {
        let data1= [{id:'100006',name:'国有企业'},{id:'100007',name:'欧美独资'},
        {id:'100008',name:'港台独资'},{id:'100009',name:'日韩独资'},
        {id:'100010',name:'合资企业'},{id:'100011',name:'民营企业'},{id:'100012',name:'其他'}]
        this.orgProperties = data1;
      });
      this.getDicData('ORG_TYPE').then((data) => {
        this.orgType = data;
      });
      this.axios.get(this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getAll').then((res) => {
        this.purOrg = res.data;
      });
    },
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    computed:{
      changeName: function () {
        if (this.form.cmpNature == 'ORG_TYPE_100302') {
          return '企业代码';
        } else {
          return '统一社会信用代码';
        }
      }
    },
    methods: {
      onExceed(files, fileList){
        let f = {
          name: files[0].name,
          percentage: 0,
          raw: files[0],
          size: files[0].size,
          status: "ready",
          url: URL.createObjectURL(files[0])
        };
        fileList.splice(0, 1, f);
      },
      previewFile(file) {
        if (file.url.indexOf('blob:http') < 0) {
          this.downloadFile(file.url, file.name);
        }
      },
      // downloadFile(url, name) {
      //   downloadUtil.download(url, name);
      // },
      initData(data) {
        for (let key in this.form) {
          this.form[key] = data[key];
        }
        if (data.socialCreditCodeFileUrl && data.socialCreditCodeFileUrl !== '') {
          this.socialCreditCodeFileList.push({
            name: data.socialCreditCodeFileName,
            url: data.socialCreditCodeFileUrl
          });
        }
        if (data.exportFileUrl && data.exportFileUrl !== '') {
          this.exportFileList.push({
            name: data.exportFileName,
            url: data.exportFileUrl
          });
        }
        if (data.secrecyFileUrl && data.secrecyFileUrl !== '') {
          this.secrecyFileList.push({
            name: data.secrecyFileName,
            url: data.secrecyFileUrl
          });
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
          let _this = this;
          const validateRequired = (rule, value, callback) => {
            if (_this.form.countryCode === '' && _this.form.provinceCode === '' && _this.form.cityCode === '') {
              callback(new Error(rule.message));
            } else {
              callback();
            }
          };
          this.rules.countryCode = [{
            validator: validateRequired,
            trigger: 'change',
            message: '请输入注册地址',
            required: true
          }];
        });
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          this.form.socialCreditCodeFileName = '';
          this.form.exportFileName = '';
          this.form.secrecyFileName = '';
          if (this.$refs.socialCreditCodeFile.uploadFiles.length > 0) {
            if (this.$refs.socialCreditCodeFile.uploadFiles[0].raw) {
              this.form['socialCreditCodeFile'] = this.$refs.socialCreditCodeFile.uploadFiles[0].raw;
              this.form.socialCreditCodeFileUrl = '';
            }
            this.form.socialCreditCodeFileName = this.$refs.socialCreditCodeFile.uploadFiles[0].name;
            // this.form.socialCreditCodeFileUrl = this.$refs.socialCreditCodeFile.uploadFiles[0].url;
          }
          if (this.form.exitFlag != 0 &&this.$refs.exportFile.uploadFiles.length > 0) {
            if (this.$refs.exportFile.uploadFiles[0].raw) {
              this.form['exportFile'] = this.$refs.exportFile.uploadFiles[0].raw;
              this.form.exportFileUrl = '';
            }
            this.form.exportFileName = this.$refs.exportFile.uploadFiles[0].name;
          }
          if (this.$refs.secrecyFile.uploadFiles.length > 0) {
            if (this.$refs.secrecyFile.uploadFiles[0].raw) {
              this.form['secrecyFile'] = this.$refs.secrecyFile.uploadFiles[0].raw;
              this.form.secrecyFileUrl = '';
            }
            this.form.secrecyFileName = this.$refs.secrecyFile.uploadFiles[0].name;
          }
          if (isCheck) {
            this.$refs['form'].validate((valid) => {
              if (valid) {
                resolve({
                  data: this.form,
                  check: true
                });
              } else {
                resolve({
                  data: this.form,
                  check: false
                });
              }
            });
          } else {
            resolve({
              data: this.form,
              check: true
            });
          }
        });
      },
      selectChange(data){
        this.tempAddress = data.join('') + (this.form.addressDetail?this.form.addressDetail: '');
      },
      addressDetailChange(val){
        this.$nextTick(()=>{
          this.form.address =  this.$refs['addressSelect'].getAllLabel().join('') + (this.form.addressDetail?this.form.addressDetail: '');
        });
      }
    },
    watch: {
      'form.cmpNature': function (val) {
        this.$emit('show-car-component', val);
      },
      'tempAddress':function (val) {
        this.form.address = val;
      },
      'form.exitFlag': function (val) {
        if (val == 1) {
          this.rules.exportFileName = [{
            required: true,
            message: '请选择出口许可证上传',
            trigger: 'change'
          }];
        } else {
          delete this.rules.exportFileName;
        }
      }
    }
  }

</script>
